龙猫 Studio.

Material Design の Android icons

Word count: 460Reading time: 1 min
2019/09/22 Share

Material Design の Android icons

原文链接

使用

下面的设计原则是关于 Android 图标的视觉体验,动画和行为。

载入图标

载入图标是提供给 google play 的图片资源,需要注意一下要求:

  • PNG格式或者矢量图格式
  • 背景层和前景层不能有遮罩或者背景阴影
  • 每个图层需要超过整体区域的50%

OEM的要求如下:

  • 展现在OEM平台的一个单独的图形
  • 一个外层阴影(可选)

骨架图

所有的图标应该按照这个骨架图来保证视觉样式的统一性。

**正方形** 宽:44dp 高:44dp 圆角:4dp
**圆形** 直径:52dp
**竖向矩形** 高:52dp 宽:36dp 圆角:4dp
**横向矩形** 高:36dp 宽:52dp 圆角:4dp

规格

层级

图标包含两层:前景图和背景图。每层都可以展示动画和独立处理。

**前景图(视差滚动)** 108x108 dp 72dp 的遮罩截面 推荐透明 **背景图(精细视差)** 108x108 dp 72dp masked section 不透明 ## 阴影 当设计图标的时候,光影之间的对比应该保持一致。阴影的界限能够让元素从背景中区分出来。 透明度:20% X 偏移:0dp Y 偏移:4dp 高斯模糊半径:4dp 颜色:和填充色、阴影值有关
阴影的界限应该是柔和的。

边缘填充和颜色

为了提供一种深度感,对元素的顶部和底部的边缘进行了处理。

  • 颜色填充头部边缘并且高亮
  • 底部边缘阴影显示

着色边缘
高度:1dp
透明度:20%
颜色:白色

阴影边缘 高度:1dp 透明度:20% 颜色:颜色、阴影

终点层

终点层固定在前景层上。

规格

圆角:45度
中心:32%
颜色:填充色、边缘和阴影

CATALOG
  1. 1. 使用
    1. 1.1. 载入图标
  2. 2. 骨架图
  3. 3. 规格
    1. 3.1. 层级
    2. 3.2. 边缘填充和颜色
    3. 3.3. 终点层
      1. 3.3.1. 规格